<template>
  <div class="hello">
    <el-container v-loading="loading" element-loading-text="模板加载中">
      <el-header>
        <span class="title">{{ tem_name || "模板设计" }}</span>
        <el-button @click="close">关闭</el-button>
        <el-button @click="saveTemplate">保存</el-button>
      </el-header>
      <el-main>
        <div class="left">
          <div
            class="main"
            :style="{ width: page.width + 'mm', height: page.height + 'mm' }"
          >
            <newDrag
              :orderlistProps="orderlistProps"
              :goodslistProps="goodslistProps"
              :countlistProps="countlistProps"
              :signlistProps="signlistProps"
              :mainlistProps="mainlistProps"
              :key="timer"
              ref="newDrag"
            ></newDrag>
          </div>
        </div>
        <div class="right">
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              打印设置
            </div>
            <div class="item-main page">
              <ul>
                <li>
                  <span class="page-item-title"
                    >每页显示行数
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="当输入显示的行数过大时，则默认换到下一页"
                      placement="top-start"
                    >
                      <i class="el-icon-question"></i> </el-tooltip
                    >:</span
                  >
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="printSetting.lineNumber"
                      style="width: 150px"
                      @change="pageSizeSet"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <span class="page-item-title">上边距:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="printSetting.topMargin"
                      style="width: 150px"
                    ></el-input>
                  </div>
                  <span class="page-item-title">左边距:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="printSetting.leftMargin"
                      style="width: 150px"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <span class="page-item-title"
                    >打印预览<el-tooltip
                      class="item"
                      effect="dark"
                      content="默认关闭，开启后每次打印则会先预览样式。"
                      placement="top-start"
                    >
                      <i class="el-icon-question"></i>:</el-tooltip
                    ></span
                  >
                  <div class="page-item-content">
                    <el-checkbox v-model="printSetting.isShow"></el-checkbox>
                  </div>
                  <span class="page-item-title" v-if="TotalbyCategory"
                    >分类统计<el-tooltip
                      class="item"
                      effect="dark"
                      content="默认关闭，开启后每次打印则会按商品分类合计。"
                      placement="top-start"
                    >
                      <i class="el-icon-question"></i>:</el-tooltip
                    ></span
                  >
                  <div class="page-item-content" v-if="TotalbyCategory">
                    <el-checkbox
                      v-model="printSetting.is_category"
                    ></el-checkbox>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 用户选择 -->
          <div class="item" v-if="change_user == 1">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              用户选择
            </div>
            <div class="item-main page">
              <ul>
                <li class="user_tags_box">
                  <el-tag
                    size="medium"
                    v-for="tag in user_tags"
                    :key="tag.id"
                    closable
                    @close="handleCloseTag(tag, 1)"
                    type="success"
                  >
                    {{ tag.nickname }}
                  </el-tag>
                  <div
                    class="more"
                    @click="more_user = !more_user"
                    v-show="more_user_tags.length > 0"
                  >
                    <span>更多</span>
                    <i :class="[{ on: more_user }, ' el-icon-arrow-down']"></i>
                  </div>
                </li>
                <el-collapse-transition>
                  <div v-if="more_user">
                    <li class="more_user_box">
                      <el-tag
                        size="medium"
                        v-for="tag in more_user_tags"
                        :key="tag.id"
                        closable
                        @close="handleCloseTag(tag, 2)"
                        type="success"
                      >
                        {{ tag.nickname }}
                      </el-tag>
                    </li>
                  </div>
                </el-collapse-transition>
                <li>
                  <el-button type="primary" @click="openSeleteDia"
                    >筛选用户</el-button
                  >
                </li>
                <li>
                  <span class="page-item-title">模板备注:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      style="width: 300px"
                      v-model.trim="remark"
                    ></el-input>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 纸张设置 -->
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              纸张设置
            </div>
            <div class="item-main page">
              <ul>
                <li>
                  <span class="page-item-title">多联纸:</span>
                  <div class="page-item-content">
                    <el-radio-group
                      v-model="page.quota"
                      size="mini"
                      @change="quotaSet"
                    >
                      <el-radio-button label="1">一等份</el-radio-button>
                      <el-radio-button label="2">二等份</el-radio-button>
                      <el-radio-button label="3">三等份</el-radio-button>
                    </el-radio-group>
                  </div>
                </li>
                <li>
                  <span class="page-item-title">其他常用纸:</span>
                  <div class="page-item-content">
                    <el-radio-group
                      v-model="page.pageType"
                      size="mini"
                      @change="pageTypeChange"
                    >
                      <el-radio-button label="A4纸"></el-radio-button>
                      <el-radio-button label="A5纸"></el-radio-button>
                      <el-radio-button label="A6纸"></el-radio-button>
                    </el-radio-group>
                  </div>
                </li>

                <li>
                  <span class="page-item-title">顶部标题:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      style="width: 300px"
                      v-model="page.headerTitle"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <span class="page-item-title"
                    >纸张宽度<el-tooltip
                      class="item"
                      effect="dark"
                      content="自定义打印纸张的大小，请谨慎修改"
                      placement="top-start"
                    >
                      <i class="el-icon-question"></i> </el-tooltip
                    >:</span
                  >
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="page.width"
                      style="width: 120px"
                    ></el-input>
                  </div>
                  <span class="page-item-title">纸张高度:</span>
                  <div class="page-item-content">
                    <el-input
                      placeholder="请输入内容"
                      size="mini"
                      v-model="page.height"
                      style="width: 150px"
                    ></el-input>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 订单信息 -->
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              订单信息
            </div>
            <div class="item-main header-info">
              <div>
                <el-checkbox-group v-model="orderType" @change="selectorder">
                  <el-checkbox
                    v-for="item in orderMenuList"
                    :key="item.index"
                    :label="item.index"
                    border
                    size="mini"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <FontSet
                :fontset="orderFontSet"
                @getdata="(data) => getdata(data, 'order')"
              ></FontSet>
            </div>
          </div>
          <!-- 商品信息 -->
          <div class="item">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              商品信息
            </div>
            <div class="item-main main-info">
              <div>
                <el-checkbox-group v-model="goodsType" @change="selectgoods">
                  <el-checkbox
                    v-for="item in goodsMenuList"
                    :key="item.index"
                    :label="item.index"
                    border
                    size="mini"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <div class="main—info-defind">
                <el-tag
                  :key="index"
                  v-for="(tag, index) in goodsUserDefind"
                  closable
                  :disable-transitions="false"
                  @close="(tag) => handleClose(tag, 'goods')"
                >
                  {{ tag.label }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="goodsinputVisible"
                  v-model="goodsinputValue"
                  ref="goodssaveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm('goods')"
                  @blur="handleInputConfirm('goods')"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput('goods')"
                  >+ 输入自定义空列</el-button
                >
              </div>
              <FontSet
                :fontset="goodsFontSet"
                @getdata="(data) => getdata(data, 'goods')"
              ></FontSet>
            </div>
          </div>
          <!-- 合计信息 -->
          <div class="item" v-if="countList.length > 0 ? true : false">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              合计信息
            </div>
            <div class="item-main footer-info">
              <div>
                <el-checkbox-group v-model="countType" @change="selectcount">
                  <el-checkbox
                    v-for="item in countList"
                    :key="item.index"
                    :label="item.index"
                    border
                    size="mini"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <FontSet
                :fontset="countFontSet"
                @getdata="(data) => getdata(data, 'count')"
              ></FontSet>
            </div>
          </div>
          <!-- 签字信息 -->
          <div class="item" v-if="signList.length > 0 ? true : false">
            <div class="item-title">
              <i class="el-icon-setting"></i>
              签字信息
            </div>
            <div class="item-main footer-info">
              <div>
                <el-checkbox-group v-model="signType" @change="selectsign">
                  <el-checkbox
                    v-for="item in signList"
                    :key="item.index"
                    :label="item.index"
                    border
                    size="mini"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <div class="footer—info-defind">
                <el-tag
                  :key="(tag, index)"
                  v-for="(tag, index) in signUserDefind"
                  closable
                  :disable-transitions="false"
                  @close="(tag) => handleClose(tag, 'sign')"
                >
                  {{ tag.label }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="signinputVisible"
                  v-model="signinputValue"
                  ref="signsaveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm('sign')"
                  @blur="handleInputConfirm('sign')"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput('sign')"
                  >+ 输入自定义空列</el-button
                >
              </div>
              <FontSet
                :fontset="signFontSet"
                @getdata="(data) => getdata(data, 'sign')"
              ></FontSet>
            </div>
          </div>
          <el-dialog
            title="筛选用户"
            :visible.sync="dialogVisible"
            width="1000px"
          >
            <select-user
              ref="selectUser"
              :tem_id="tem_id"
              @get_user="get_user"
            ></select-user>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogConfirm">确 定</el-button>
            </span>
          </el-dialog>
          <!-- <div class="item">
            <div class="item-title"></div>
            <div class="button">
              <el-button size="medium" @click="saveTemplate" type="primary"
                >保存</el-button
              >
              <el-button size="medium " @click="saveTemplate" type="danger"
                >取消</el-button
              >
            </div>
          </div> -->
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// 局部字体设置组件
import FontSet from "@/components/FontSet/FontSet";
// 拖拽组件
import newDrag from "@/views/global/print_order/newDrag";
// 筛选用户
import SelectUser from "@/views/global/print_order/components/SelectUser.vue";
// 请求数据
import { getBaseTemplate, addNewTemplate } from "@/api/global/globalPrint";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  name: "HelloWorld",
  components: {
    FontSet,
    newDrag,
    SelectUser,
  },
  data() {
    return {
      tem_name: "",
      id: this.$route.query.id,
      tem_id: this.$route.query.tem_id,
      change_user: this.$route.query.change_user, //1  为选择用户  空则不选择用户
      loading: true,
      timer: "",
      // 打印设置
      printSetting: {
        lineNumber: 100,
        topMargin: 0,
        leftMargin: 0,
        isShow: false,
        is_category: false,
      },
      TotalbyCategory: false,
      // 纸张设置
      page: {
        width: 210,
        height: 297,
        pageType: "A4纸",
        quota: "", //等份
        templateType: "3", //模板类型
        headerTitle: "配送单",
        topMargin: 60,
        bottomMargin: 30,
        userDefind: "1", //1.单排自定义，2.双排固定
      },
      // 订单信息
      orderMenuList: [
        {
          id: 1,
          label: "订单号",
          disabled: true,
          top: 0,
          left: 0,
        },
      ],
      orderMenuListProps: [],
      orderType: [1],
      orderFontSet: {
        fontSize: "14",
        bold: false,
        underline: false,
        italic: false,
        textAlign: "center",
      },
      // 商品信息
      goodsMenuList: [
        {
          id: 1,
          label: "订单号",
          disabled: true,
          top: 0,
          left: 0,
        },
      ],
      goodsMenuListProps: [],
      goodsType: [],
      goodsinputVisible: false,
      goodsinputValue: "",
      goodsFontSet: {
        fontSize: "14",
        bold: false,
        underline: false,
        italic: false,
        textAlign: "center",
      },
      // 合计信息
      countList: [
        {
          id: 1,
          label: "订单号",
          disabled: true,
          top: 0,
          left: 0,
        },
      ],
      countListProps: [],
      countType: [1],
      countFontSet: {
        fontSize: "14",
        bold: false,
        underline: false,
        italic: false,
        textAlign: "center",
      },
      // 签字信息
      signList: [
        {
          id: 1,
          label: "订单号",
          disabled: true,
          top: 0,
          left: 0,
        },
      ],
      signListProps: [],
      signType: [1],
      signUserDefind: [],
      signinputVisible: false,
      signinputValue: "",
      signFontSet: {
        fontSize: "14",
        bold: false,
        underline: false,
        italic: false,
        textAlign: "center",
      },
      // 全局信息
      mainlistProps: {
        title: {
          id: 1,
          typename: "title",
          top: 0,
          left: 0,
          bottom: 0,
        },
        orderlist: {
          id: 2,
          typename: "orderlist",
          top: 0,
          left: 0,
          bottom: 0,
        },
        goodslist: {
          id: 3,
          typename: "goodslist",
          top: 150,
          left: 0,
          bottom: 0,
        },
        countlist: {
          id: 4,
          typename: "countlist",
          top: 0,
          left: 0,
          bottom: 0,
        },
        signlist: {
          id: 5,
          typename: "signlist",
          top: 0,
          left: 0,
          bottom: 0,
        },
      },
      // 商品信息自定义空列
      goodsUserDefind: [],

      // 筛选用户
      user_tags: [],
      more_user_tags: [],
      more_user: false,
      // 模板备注
      remark: "",
      // 选择用户弹窗
      dialogVisible: false,
    };
  },
  computed: {
    // 订单信息
    orderlistProps() {
      return this.sort(this.orderMenuListProps, this.orderType);
    },
    // 商品信息
    goodslistProps() {
      return this.sort(this.goodsMenuListProps, this.goodsType).concat(
        this.goodsUserDefind
      );
    },
    // 合计信息
    countlistProps() {
      return this.sort(this.countListProps, this.countType);
    },
    // 签字信息
    signlistProps() {
      return this.sort(this.signListProps, this.signType).concat(
        this.signUserDefind
      );
    },
  },
  watch: {
    tem_name: {
      handler(val) {
        if (val == "配送单模板") {
          this.TotalbyCategory = true;
        }
      },
      immediate: true,
    },
  },
  created() {
    // let arr = [];
    // for (let index = 0; index < 30; index++) {
    //   let id = index;
    //   let nickname = `zhangsan${index}`;
    //   arr.push({ id, nickname });
    // }
    // this.user_tags = arr;
    this.index();
  },
  methods: {
    // 请求数据默认模板
    index() {
      let data = Object.assign(
        apiUrl().name,
        { tem_id: this.tem_id }
      );
      getBaseTemplate(data).then((res) => {
        if (res.errcode == 0) {
          if (!res.info) {
            this.$message.error("查询不到模板,3秒后关闭");
            let timer = setTimeout(() => {
              this.close();
            }, 3000);
            this.$once("hook:beforeDestroy", () => {
              clearInterval(timer);
              timer = null;
            });
            return;
          }
          let data = res.info;
          this.tem_name = data.tem_name;
          let main = JSON.parse(data.main_settings);
          let print = JSON.parse(data.print_settings);

          this.printSetting = print.printSetting;
          this.page = print.page;
          // 模板选项数据
          let tempData = JSON.parse(data.tem_type.temp_string);
          this.orderMenuList = tempData.orderMenuList;

          this.goodsMenuList = tempData.goodsMenuList;
          this.countList = tempData.countList;
          this.signList = tempData.signList;

          // 调整的模板样式
          this.orderMenuListProps = main.orderSetData.orderlist;
          this.goodsMenuListProps = main.goodsSetData.goodslist;
          this.countListProps = main.countSetData.countlist;
          this.signListProps = main.signSetData.signlist;
          // 选中
          this.orderType = main.orderSetData.selectType;
          this.goodsType = main.goodsSetData.selectType;
          this.countType = main.countSetData.selectType;
          this.signType = main.signSetData.selectType;
          // 自定义字段
          this.goodsUserDefind = main.goodsSetData.goodsUserDefind;
          this.signUserDefind = main.signSetData.signUserDefind;
          // 字体加载
          this.goodsFontSet = main.goodsSetData.fontset;

          this.orderFontSet = main.orderSetData.fontset;
          this.signFontSet = main.signSetData.fontset;
          this.countFontSet = main.countSetData.fontset;

          // 全局布局
          this.mainlistProps = main.mainSetData.mainlist;
          this.loading = false;
        }
      });
    },
    // 筛选选中的项
    sort(list, selectList) {
      let arr = [];
      list.map((e) => {
        selectList.map((p) => {
          if (e.index == p) {
            arr.push(e);
          }
        });
      });
      return arr;
    },
    // 纸张型号设置
    pageTypeChange(e) {
      this.timer = new Date().getTime();
      this.page.quota = "";
      if (e === "A4纸") {
        this.page.width = 210;
        this.page.height = 297;
      } else if (e === "A5纸") {
        this.page.width = 148;
        this.page.height = 210;
      } else if (e === "A6纸") {
        this.page.width = 105;
        this.page.height = 148;
      }
    },
    // 纸张大小自定义设置
    pageSizeSet() {
      this.page.pageType = "自定义";
    },
    // 纸张等份设置
    quotaSet(e) {
      this.timer = new Date().getTime();
      this.page.pageType = "";
      this.page.quota = e;
      switch (e) {
        case "1":
          this.page.width = 241;
          this.page.height = 280;
          break;
        case "2":
          this.page.width = 241;
          this.page.height = 140;
          break;
        case "3":
          this.page.width = 241;
          this.page.height = 93;
          break;
      }
    },
    // 获取fontSET子组件数据
    getdata(data, type) {
      switch (type) {
        case "order":
          this.orderFontSet = data;
          break;
        case "goods":
          this.goodsFontSet = data;
          break;
        case "count":
          this.countFontSet = data;
          break;
        case "sign":
          this.signFontSet = data;
          break;
      }
    },

    selectorder(val) {
      this.orderMenuListProps = this.selectMethod(
        val,
        this.orderMenuList,
        this.orderMenuListProps
      );
    },
    selectgoods(val) {
      this.goodsMenuListProps = this.selectMethod(
        val,
        this.goodsMenuList,
        this.goodsMenuListProps
      );
    },
    selectcount(val) {
      this.countlistProps = this.selectMethod(
        val,
        this.countList,
        this.countListProps
      );
    },
    selectsign(val) {
      this.signListProps = this.selectMethod(
        val,
        this.signList,
        this.signListProps
      );
    },
    // 选中添加
    selectMethod(val, menu, props) {
      let newarr = [];
      menu.map((item) => {
        val.forEach((element) => {
          if (item.index == element) {
            newarr.push(item);
          }
        });
      });
      let diff = [];
      newarr.forEach((data) => {
        if (props.every((meber) => meber.index !== data.index)) {
          diff.push(data);
        }
      });
      return props.concat(diff);
    },
    // 保存模板
    saveTemplate() {
      // 打印和纸张设置
      let printSetData = {
        printSetting: this.printSetting,
        page: this.page,
      };
      // 订单设置
      let orderSetData = {
        orderlist: this.$refs.newDrag.orderlist,
        selectType: this.orderType,
        fontset: this.orderFontSet,
      };
      // 商品信息设置
      let goodsSetData = {
        goodslist: this.$refs.newDrag.goodslist,
        selectType: this.goodsType,
        fontset: this.goodsFontSet,
        goodsUserDefind: this.goodsUserDefind,
      };
      // 合计信息
      let countSetData = {
        countlist: this.$refs.newDrag.countlist,
        selectType: this.countType,
        fontset: this.countFontSet,
      };
      // 签字信息设置
      let signSetData = {
        signlist: this.$refs.newDrag.signlist,
        selectType: this.signType,
        fontset: this.signFontSet,
        signUserDefind: this.signUserDefind,
      };
      let mainSetData = {
        mainlist: this.$refs.newDrag.mainlist,
      };
      // 用户信息
      let new_user_tags = this.user_tags.concat(this.more_user_tags);
      let member_ids = [];
      new_user_tags.map((e) => member_ids.push(e.id));
      // 数据汇总
      let allData = {
        orderSetData,
        goodsSetData,
        countSetData,
        signSetData,
        mainSetData,
      };
      let print_settings = JSON.stringify(printSetData);
      let main_settings = JSON.stringify(allData);
      let data = Object.assign(
        apiUrl().name,
        {
          tem_id: this.tem_id,
          print_settings: print_settings,
          main_settings: main_settings,
          tem_name: this.tem_name,
          remark: this.remark,
          member_ids: member_ids.join(","),
        }
      );
      addNewTemplate(data)
        .then((res) => {
          if (res.errcode == 0) {
            this.$message.success("新增模板成功");
            setTimeout(() => {
              window.close();
            }, 1000);
          } else {
            this.$message.error(res.errmsg);
          }
        })
        .catch(() => {});
    },
    // 关闭
    close() {
      window.close();
    },
    /* element 标签的原生事件 勿删 */
    handleClose(tag, type) {
      switch (type) {
        case "sign":
          this.signUserDefind.splice(this.signUserDefind.indexOf(tag), 1);
          break;
        case "goods":
          this.goodsUserDefind.splice(this.goodsUserDefind.indexOf(tag), 1);
          break;
      }
    },

    showInput(type) {
      switch (type) {
        case "sign":
          this.signinputVisible = true;
          this.$nextTick(() => {
            this.$refs.signsaveTagInput.$refs.input.focus();
          });
          break;
        case "goods":
          this.goodsinputVisible = true;
          this.$nextTick(() => {
            this.$refs.goodssaveTagInput.$refs.input.focus();
          });
          break;
      }
    },

    handleInputConfirm(type) {
      let data = {
        id: "",
        label: "",
        disabled: false,
        top: 0,
        left: 0,
      };
      switch (type) {
        case "sign":
          if (this.signinputValue) {
            data.id = this.signList.length + 1;
            data.label = this.signinputValue;
            this.signUserDefind.push(data);
          }
          this.signinputVisible = false;
          this.signinputValue = "";
          break;
        case "goods":
          if (this.goodsinputValue) {
            data.label = this.goodsinputValue;
            data.id = this.goodsMenuList.length + 1;
            this.goodsUserDefind.push(data);
          }
          this.goodsinputVisible = false;
          this.goodsinputValue = "";
          break;
      }
    },

    /* 筛选用户---开始 */
    handleCloseTag(tag, type) {
      switch (type) {
        case 1:
          this.user_tags.splice(this.user_tags.indexOf(tag), 1);
          break;
        case 2:
          this.more_user_tags.splice(this.more_user_tags.indexOf(tag), 1);
          break;
      }
    },
    openSeleteDia() {
      this.dialogVisible = true;
    },
    get_user(data) {
      let oldarr = this.user_tags.concat(this.more_user_tags);
      let newarr = oldarr.concat(data);
      let user_tags_all = this.new_unique(newarr);
      let array_group = this.array_group(user_tags_all, 10);
      if (array_group.length > 0) {
        this.user_tags = array_group[0];
      }
      if (array_group.length == 2) {
        this.more_user_tags = array_group[1];
      }
    },
    dialogConfirm() {
      if (
        this.$refs["selectUser"] &&
        this.$refs["selectUser"].selectUserArr.length > 0
      ) {
        let oldarr = this.user_tags;
        let newarr = oldarr.concat(this.$refs["selectUser"].selectUserArr);
        let user_tags_all = this.unique(newarr);
        let array_group = this.array_group(user_tags_all, 10);
        if (array_group.length > 0) {
          this.user_tags = array_group[0];
        }
        if (array_group.length == 2) {
          this.more_user_tags = array_group[1];
        }
      }
      this.dialogVisible = false;
    },
    // 去重
    unique(arr) {
      return Array.from(new Set(arr));
    },
    new_unique(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].id == arr[j].id) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    // 分组
    array_group(array, subGroupLength) {
      let arr1 = [];
      let arr2 = [];
      arr1 = array.slice(0, subGroupLength);
      arr2 = array.slice(subGroupLength);
      return [arr1, arr2];
    },
    /* 筛选用户---结束 */
  },
};
</script>

<style lang="scss" scoped>
$main-color1: #009688; //主体颜色

li {
  list-style: none;
}

// 头部
.el-header {
  height: 60px;
  background-color: $main-color1;
  display: flex;
  align-items: center;

  .title {
    display: block;
    flex: 1;
    font-size: 24px;
    color: #fff;
  }
}

// 主体布局
.el-main {
  display: flex;
  flex-direction: row;
  background-color: #ccc;
  margin: 0;
  padding: 0;

  .left {
    flex: 1;
    height: calc(100vh - 60px);
    overflow: auto;
    display: flex;
    justify-content: center;

    .main {
      margin-top: 100px;
      margin-bottom: 100px;
      position: relative;
      background-color: #fff;
    }
  }

  .right {
    height: calc(100vh - 60px);
    overflow: auto;
    width: 500px;
    background-color: #fff;
    padding-bottom: 50px;
    border-bottom: 1px solid $main-color1;
    box-sizing: border-box;
  }
}

// 右边主体布局
.item-title {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid $main-color1;
  padding: 10px 15px;
  font-size: 16px;
  color: #000;
  font-weight: 700;
}

// 纸张设置
.page {
  padding: 0 20px;

  ul {
    margin-bottom: 15px;

    li {
      display: flex;
      align-items: center;
      margin-top: 15px;

      .page-item-title {
        font-size: 14px;
        color: #333;
        margin-right: 10px;
      }

      .page-item-content {
        flex: 1;
      }

      .template-set {
        padding-left: 30px;
      }
    }
  }
}

// 头部信息
.header-info,
.main-info,
.footer-info {
  padding: 0 20px;

  div {
    &:first-child {
      .el-checkbox {
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 8px;
      }
    }
  }
}
.footer—info-defind,
.main—info-defind {
  padding: 5px 0;
  margin-left: 5px;
  .el-tag {
    display: block;
    width: 300px;
    margin-bottom: 5px;
  }
}

// 主体部分信息
.guide-line {
  margin-top: 10px;

  .item {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-bottom: 10px;

    .guide-line-title {
      font-size: 16px;
    }

    .item-content {
      display: flex;
      flex-direction: row;
      align-content: center;

      .input-box {
        display: flex;
        align-content: center;

        span {
          display: inline-block;
          padding: 2px 0px 2px 3px;
          border-radius: 0 5px 5px 0;
          height: 30px;
          line-height: 26px;
          box-sizing: border-box;
          width: 40px;
          border: 1px solid #cccccc;
          font-size: 14px;
          background-color: #ccc;
        }

        input[type="number"] {
          margin-left: 15px;
          padding: 2px 0px 2px 13px;
          border-radius: 5px 0 0 5px;
          height: 30px;
          box-sizing: border-box;
          width: 70px;
          border: 1px solid #cccccc;

          &:focus {
            outline: none;
          }
        }
      }
    }

    select {
      padding: 2px 3px;
      border-radius: 5px;
      height: 30px;
      box-sizing: border-box;
      border-style: none;
      border: 1px solid #cccccc;

      &:hover {
        border: 1px solid $main-color1;
      }

      &:focus {
        outline: none;
      }
    }
  }
}

// 自定义字段信息
.user-defind {
  padding: 10px 20px;
  margin-bottom: 50px;

  .el-tag {
    display: block;
    width: 300px;
    margin-bottom: 15px;
  }
}
.button {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 15px;
  .el-button {
    width: 110px;
    height: 40px;
    font-size: 18px;
  }
}

//用户筛选
.user_tags_box {
  display: flex;
  flex-wrap: wrap;
  .el-tag {
    display: block;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
.more {
  user-select: none;
  font-size: 12px;
  height: 28px;
  line-height: 26px;
  padding: 0 10px;
  margin-bottom: 10px;
  i {
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: -1px;

    &.on {
      transform: rotate(180deg);
    }
  }

  &:hover {
    cursor: pointer;
  }
}
.more_user_box {
  display: flex;
  flex-wrap: wrap;
  .el-tag {
    display: block;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  margin-top: 0 !important;
}
</style>
